<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
            AJAX 全称(Async Javascript and XML)
         *  Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ JavaScript 来操作 DOM ⽽更新⻚⾯
        实现 Ajax 异步交互需要服务器逻辑进⾏配合，需要完成以下步骤：
            创建 Ajax 的核⼼对象 XMLHttpRequest 对象
            通过 XMLHttpRequest 对象的 open() ⽅法与服务端建⽴连接
            构建请求所需的数据内容，并通过 XMLHttpRequest 对象的 send() ⽅法发送给服务器端
            通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
            接受并处理服务端向客户端响应的数据结果
            将处理结果更新到 HTML ⻚⾯中
         * **/ 

            var xmlhttp = new XMLHttpRequest()
            xmlhttp.onreadystatechange = state_Change;
            xmlhttp.open('GET','baidu.com', true) // 默认是异步
            xmlhttp.send(null)

            function state_Change(){
                if(xmlhttp.readyState == 4){
                    if(xmlhttp.readyState == 200){
                        // do something  做业务逻辑
                    }
                } else {
                    alert('Problem retrieving XML data')
                }
        }


        /*
            ajax 和  axios的区别

            1、ajax 是基于XMLHttpRequest的 open,send方式实现通信的 需要手动设置请求头，转换数据格式
                axios是通过Promise封装请求，支持async await 语法代码结构更简洁，自动转换数据格式
            
            2、跨平台 ajax仅适用于浏览器 axios内置跨域请求 和 JSONP
        */ 
    </script>
</body>
</html>